<template>
  <CustomTableCard 
    footer
    temporary 
    actions 
    :total="total" 
    :page.sync="queryParams.page" 
    :limit.sync="queryParams.limit" 
    :showDrawer.sync="showDrawer" 
    :width="1000"
    @on-page="getList" 
    @cancel="handleCancel"
    @ok="handleOk"
    title="预订">
    <div slot="header">
      <v-row>
        <v-col cols="2">
          <v-select
            v-model="queryParams.type"
            :items="['已审核', '未审核', '已预订', '未预订']"
            label="选择状态"
            solo
            dense
            outlined
            flat
            hide-details
            clearable
          ></v-select>
        </v-col>
        <v-col cols="2">
          <v-select
            v-model="queryParams.dateType"
            :items="['入住日期', '散团日期', '订单日期', '创建日期']"
            solo
            dense
            outlined
            flat
            hide-details
          ></v-select>
        </v-col>
        <v-col cols="3">
          <el-date-picker
            v-model="queryParams.dateRange"
            type="daterange"
            align="center"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%">
          </el-date-picker>
        </v-col>
        <v-col cols="2">
          <v-text-field
            label="搜索线路"
            outlined
            dense
            hide-details
          ></v-text-field>
        </v-col>
        <v-col>
          <v-btn color="info" class="mr-3">搜索</v-btn>
        </v-col>
        <v-col cols="2" class="text-right">
          <v-btn color="primary" @click="showDrawer = true">添加</v-btn>
        </v-col>
      </v-row>
    </div>
    <el-table
      v-loading="loading"
      v-auto-height
      :height="tableHeight"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="name"
        label="餐厅名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="所属团号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="用餐日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="数量"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="成本单价"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="销售价"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="额外费用"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="额外费用说明"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="结算方式"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="备注"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="业务类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="审核状态"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="所属员工"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="所属部门"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="预订人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="预订时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="状态"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        prop="address"
        label="操作"
        align="center"
        width="180">
        <template slot-scope="{ row }">
          <v-btn small color="primary" outlined>预订</v-btn>
          <v-btn small color="primary" outlined>编辑</v-btn>
        </template>
      </el-table-column>
    </el-table>
    <div slot="actions">
      <v-btn small outlined color="primary" class="mr-2">预订</v-btn>
      <v-btn small outlined color="primary" class="mr-2">编辑预订</v-btn>
    </div>
    <section slot="drawer" class="pa-3">
      <v-form
        ref="form"
        :lazy-validation="false"
      >
        <v-card class="mb-4">
          <v-card-title>预订单</v-card-title>
          <v-divider />
          <el-table
            :data="contactData">
            <el-table-column
              label="预订状态"
              width="120">
            </el-table-column>
            <el-table-column
              label="所属团号"
              width="120">
            </el-table-column>
            <el-table-column
              label="餐厅名称"
              width="180">
              <template slot="header">
                <span class="mr-1">餐厅名称</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="用餐日期"
              width="180">
              <template slot="header">
                <span class="mr-1">用餐日期</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="数量"
              width="100">
              <template slot="header">
                <span class="mr-1">数量</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="成本单价"
              width="140">
              <template slot="header">
                <span class="mr-1">成本单价</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="成本合计"
              width="140">
              <template slot="header">
                <span class="mr-1">成本合计</span>
                <small style="color: red">({{$t('other.required')}})</small>
              </template>
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="额外费用"
              width="140">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="额外费用说明"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="凭证号"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="结算方式"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="联系人"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="联系电话"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              width="180">
              <template slot-scope="{ row }">
                <v-text-field
                  v-model="row.fullname"
                  outlined
                  single-line
                  hide-details
                  dense
                  :rules="[rules.required]"
                  required
                ></v-text-field>
              </template>
            </el-table-column>
          </el-table>
          <v-row align="center">
            <v-col cols="6" class="pl-6">
              <div class="d-flex align-center flex-grow-1">
                <label style="width: 140px" class="text-right pr-3">币种</label>
                <v-select
                  :items="['人民币', ' 泰铢']"
                  dense
                  hide-details
                  ></v-select>
              </div>
            </v-col>
            <v-col cols="6" class="pl-0">
              <div class="d-flex align-center flex-grow-1 px-3">
                <label style="width: 140px" class="text-right flex-shrink-0 pr-3">汇率</label>
                <span>1</span>
              </div>
            </v-col>
          </v-row>
          <v-row align="center">
            <v-col cols="6" class="pl-6">
              <div class="d-flex align-center flex-grow-1">
                <label style="width: 140px" class="text-right pr-3">应付总额</label>
                <span>1</span>
              </div>
            </v-col>
            <v-col cols="6" class="pl-0">
              <div class="d-flex align-center flex-grow-1 px-3">
                <label style="width: 140px" class="text-right flex-shrink-0 pr-3">本币总额</label>
                <span>930</span>
               </div>
            </v-col>
          </v-row>
          <v-row align="center">
            <v-col cols="6" class="pl-6">
              <div class="d-flex align-center flex-grow-1">
                <label style="width: 140px" class="text-right pr-3">结算方式</label>
                <v-select
                  :items="['公司支付', ' 导游签单']"
                  dense
                  hide-details
                  ></v-select>
              </div>
            </v-col>
            <v-col cols="6" class="pl-0">
              <div class="d-flex align-center flex-grow-1 px-3">
                <label style="width: 140px" class="text-right flex-shrink-0 pr-3">预计结款日期</label>
                <el-date-picker value-format="yyyy-MM-dd" small></el-date-picker>
               </div>
            </v-col>
          </v-row>
          <v-row align="center">
            <v-col cols="12">
              <div class="d-flex align-center flex-grow-1">
                <label style="width: 140px" class="text-right pr-3">备注</label>
                <v-text-field
                    v-model="baseInfo.name"
                    placeholder="请输入"
                    clearable
                    dense
                  ></v-text-field>
              </div>
            </v-col>
          </v-row>
        </v-card>
      </v-form>
    </section>
  </CustomTableCard>
</template>

<script>
// @ is an alias to /src
import { mapMutations } from 'vuex'
import mixin from './mixin'
import { getSpOrderList } from '@/api/group'

export default {
  name: 'arrangeRestaurant',
  mixins: [mixin],
  created() {
    this.getList()
    this.cloneFormData()
  },
  activated() {
    this.getList()
  },
  deactivated() {
    console.log('deactivated')
  },
  mounted() {

  },
  data() {
    return {
      showDrawer: false,
      loading: false,
      tableData: [{}],
      total: 0,
      queryParams: {
        page: 1,
        limit: 20,
        type: '',
        dateType: '',
        dateRange: [],
      },

      baseInfo: {
        id: undefined,
      },

      multipleSelection: [],
      contactData: [],

      rules: {
        required: value => !!value || 'required',
      }
    }
  },

  methods: {
    // 克隆数据 用于重置数据使用
    cloneFormData() {
      this._baseInfo = Object.assign({}, this.baseInfo)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 获取列表
    getList(page) {
      if (/\d+/.test(page)) {
        this.queryParams.page = page
      }
      this.loading = true
      getSpOrderList(this.queryParams).then(response => {
        this.tableData = response.data.data
        this.total = response.data.count
      }).finally(() => {
        this.loading = false
      })
    },
    // 右侧窗口关闭事件
    handleCancel() {
      this.resetForm()
    },
    // 重置表达数据和验证
    resetForm () {
      Object.assign(this.baseInfo, this._baseInfo)
      this.$refs.form.resetValidation()
    },
    // 右侧窗口确定事件
    handleOk() {
      // console.log(this.baseInfo)
      // if(this.$refs.form.validate()) {
      //   if(this.baseInfo.id) {
      //     systemApi.updateLang(this.baseInfo).then(() => {
      //       this.$message.success('success')
      //       this.getList()
      //       this.showDrawer = false
      //     })
      //   } else {
      //     systemApi.addLang(this.baseInfo).then(() => {
      //       this.$message.success('success')
      //       this.getList(1)
      //       this.showDrawer = false
      //     })
      //   }
      // }
    }
  }
}
</script>
